<template>
    <div class="login">
        <div class="header container">
            <a href=""><img src="/imgs/login-logo.png" alt=""></a>
        </div>
        <div class="wrapper">
            <div class="container">
                <div class="login-form">
                    <h3>
                        <a href="javascript:;"><span class="checked">账号登录</span></a>
                        <span class="line">|</span>
                        <a href="javascript:;"><span>扫码登录</span></a>
                    </h3>
                    <div class="user-login" v-show="loginType == 1">
                        <div class="input">
                            <input type="text" v-model="username" placeholder="请输入账号">
                        </div>
                        <div class="input">
                            <input type="password" v-model="password" placeholder="请输入密码">
                        </div>
                        <div class="btn-box">
                            <a href="javascript:;" class="btn btn-large" v-on:click="login">登录</a>
                        </div>
                    </div>
                    <div class="user-login" v-show="loginType == 2">
                        <div class="input phone-number">
                            <div class="phone-title">
                                <span>+86</span>
                            </div>
                            <input class="phone-val" type="text" v-model="phone" placeholder="手机号码">
                        </div>
                        <div class="input phone-number">
                            <input type="password" v-model="phoneCode" placeholder="短信验证码">
                            <button v-if="!sendDisabled" class="btn btn-sms" @click="sendCode">{{sendText}}</button>
                            <button v-if="sendDisabled" class="btn btn-sms" >{{sendText}}</button>
                        </div>
                        <div class="btn-box">
                            <a href="javascript:;" class="btn btn-large" v-on:click="phoneLoginSub">立即登录/注册</a>
                        </div>
                    </div>

                    <div class="tips">
                        <div class="sms">
                            <a v-show="loginType == 1" href="javascript:;" @click="phoneLogin()">手机短信登录/注册</a>
                            <a v-show="loginType == 2" href="javascript:;" @click="userLogin()">用户名密码登录</a>
                        </div>
                        <div class="reg">
                            <a href="javascript:;">立即注册</a>
                            <span class="line">|</span>
                            <a href="javascript:;">忘记密码？</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
    import NavFooter from './../components/NavFooter'
    import {Message} from 'element-ui'
    import storage from '../storage/index'
    export default{
        name:'home',
        data() {
            return {
                //用户相关
                username: '',
                password: '',
                //手机用户
                phone: "",
                phoneCode:"",
                sendDisabled: false,
                sendText: "发送验证码",
                //登录方式 1：用户名+密码； 2：手机号+验证码； 3：扫码
                loginType: 1,


                userId: 0,
                res : {},
                //跳转地址
                redirectUrl: "/index"
            }
        },
        mounted() {
            let url = decodeURIComponent(this.$route.query.redirect)
            if (url !== 'undefined') {
                this.redirectUrl = url
            }
            //判断是否已经登录
        },
        components:{
            NavFooter
        },
        methods: {
            login() {
                let {username, password} = this
                this.axios.post('/user/login', {
                    username,
                    password
                }).then((res)=> {
                    this.$cookie.set('userId', res.id, {expires: '1M'})
                    //保存到vuex
                    this.$store.dispatch('saveUserName', res.username)
                    this.$router.push('/index')
                }).catch((err)=> {
                    alert(err.msg)
                })
            },
            phoneLogin() {
                this.loginType = 2
            },
            userLogin() {
                this.loginType = 1
            },
            phoneLoginSub() {
                if (this.phone == "" || !this.validate.validateIsPhone(this.phone)) {
                    Message.error('请输入正确的手机号码！');
                    return;
                }
                if (this.phoneCode == "") {
                    Message.error('请输入短信验证码！');
                    return;
                }
                this.http.post('/api/login/phone', {phone_number: this.phone, code: this.phoneCode, type: this.loginType}).then((res)=> {
                    storage.setItem("token", res.result.token);
                    //保存到vuex
                    this.$store.dispatch('saveUserName', res.result.username)
                    this.$router.push({
                        path: this.redirectUrl
                    })
                })
            },
            sendCode() {
                let timerNum = 60;
                let _this = this
                if (this.phone == "" || !this.validate.validateIsPhone(this.phone)) {
                    Message.error('请输入正确的手机号码！');
                    return;
                }
                //发送验证码
                this.http.post('/api/smscode', {"phone_number": this.phone}).then(()=> {
                    _this.sendDisabled = true;
                    let timer = setInterval(function () {
                        if (timerNum <= 0) {
                            _this.sendText = "发送验证码";
                            clearInterval(timer);
                            _this.sendDisabled = false;
                        } else {
                            _this.sendText = timerNum + "秒后重新获取";
                            timerNum--;
                        }
                    }, 1000);
                }).catch((error)=> {
                    Message.error(error.message);
                    return;
                })
            },
        }
    }
</script>
<style lang="scss">
    .login {
        .container {
            width:1226px;
            margin-right:auto;
            margin-left:auto;
        }
        .header {
            height: 113px;
            line-height: 113px;
            a {
                img {
                    width: auto;
                    height: 100%;
                }
            }
        }
        .wrapper {
            height: 576px;
            background: url("/imgs/login-bg.jpg") no-repeat 50%;
            .container {
                position: relative;
                width:1226px;
                margin-right:auto;
                margin-left:auto;
                .login-form {
                    position: absolute;
                    right: 0;
                    top: 65px;
                    padding-left: 31px;
                    padding-right: 31px;
                    width: 410px;
                    height: 510px;
                    background-color: #ffffff;
                    box-sizing: border-box;
                    h3 {
                        font-weight: bold;
                        font-size: 24px;
                        line-height: 23px;
                        text-align: center;
                        margin: 40px auto 49px;
                        .line {
                            margin: 0 30px;
                        }
                        a {
                            color: #000000;
                            .checked {
                                color: #FF6600;
                            }
                        }

                    }

                    .input {
                        display: inline-block;
                        width: 348px;
                        height: 50px;
                        border: 1px solid #E5E5E5;
                        margin-bottom: 20px;
                        input {
                            box-sizing: border-box;
                            width: 100%;
                            height: 100%;
                            border: none;
                            padding: 18px;
                        }
                    }
                    .phone-number {
                        width: 348px;
                        display: flex;
                        .phone-val {
                            width: 290px;
                        }
                        .phone-title {
                            height: 50px;
                            line-height: 50px;
                            width: 58px;
                            border-right: 1px solid #E5E5E5;
                            text-align: center;
                        }
                    }

                    .btn-box {
                        .btn-large {
                            width: 100%;
                        }
                    }
                    .tips {
                        /*margin-top: 14px;*/
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        height: 40px;
                        line-height: 40px;
                        a {
                            color: #999999;
                        }
                        .sms {
                            a {
                                color: #FF6600;
                            }
                        }
                        .line {
                            margin: 0 3px;
                            color: #999999;
                        }
                    }
                }
            }
        }
    }
</style>